<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
	<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
	<div id="root">

	</div>
</body>

</html>

<script type="text/babel">
class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: 'huruqing',
      password: 123456,
			msg: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
			<div>
				 <form>
						<label>
							用户名:
							<input
								name="username"
								type="text"
								value={this.state.username}
								onChange={this.handleChange} />
						</label>
						<br />
						<label>
							密码:
							<input
								name="password"
								type="text"
								value={this.state.password}
								onChange={this.handleChange} />
						</label>
					</form>
					<p>
						你输入的用户名是: {this.state.username} <br/>
						你输入的密码是:   {this.state.password}
					</p>
			</div>
    );
  }
}

ReactDOM.render(
  <Reservation />,
  document.getElementById('root')
)
</script>
